import "./App.css";
import { Outlet, useLocation, useNavigate } from "react-router";
import {
  Avatar,
  Button,
  Dialog,
  Dropdown,
  Empty,
  Input,
  InputValue,
} from "tdesign-react";
import { ReactNode, useEffect, useState } from "react";
import { AddIcon } from "tdesign-icons-react";
import AddNote from "./conponents/addNote";

function App() {
  const location = useLocation();
  const [value, set_value] = useState<string>("");
  const [visible, setVisible] = useState<boolean>(false);

  const DefaultContent = () => {
    return (
      <div>
        <Empty description="当前页面未配置添加按钮的功能" />
      </div>
    );
  };

  const [DialogContent, setDialogContent] = useState<ReactNode>(DefaultContent);
  const [dialogHeader, setDialogHeader] = useState<string>("未配置");

  const navigate = useNavigate();
  useEffect(() => {
    navigate("/home");
  }, []);

  const enter = (value: InputValue) => {
    if (value.startsWith("/")) {
      navigate(value);
      set_value("");
    }
  };

  const change = (value: InputValue) => {
    set_value(value);
  };

  const openDialog = () => {
    console.log(location.pathname);

    switch (location.pathname) {
      case "/home":
        setDialogContent(DefaultContent);
        setDialogHeader("未配置");
        break;
      case "/note":
        setDialogContent(AddNote);
        setDialogHeader("添加备忘录");
        break;
      default:
        setDialogContent(DefaultContent);
        setDialogHeader("未配置");
    }

    setVisible(true);
  };

  return (
    <div className="container">
      <div className="navbar">
        <div className="navbar-left"></div>
        <Input
          placeholder="/TCODE..."
          onChange={change}
          className="navbar-input"
          value={value}
          onEnter={enter}
        />
        <div className="navbar-mid"></div>
        <div className="navbar-right">
          <Button
            icon={<AddIcon />}
            style={{ marginRight: 10 }}
            onClick={openDialog}
          />
          <Dropdown
            options={[
              {
                content: "个人中心",
                value: 1,
                onClick: () => navigate("/userCenter"),
              },
            ]}
          >
            <Avatar
              image="https://tdesign.gtimg.com/site/avatar.jpg"
              shape="circle"
            />
          </Dropdown>
        </div>
      </div>
      <Outlet />
      <Dialog
        visible={visible}
        header={dialogHeader}
        onCancel={() => setVisible(false)}
        onClose={() => setVisible(false)}
      >
        {DialogContent}
      </Dialog>
    </div>
  );
}

export default App;
